<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      /* 过渡动画效果：所有属性 过渡动画时间; */
      transition: all 0.5s;
    }
  </style>
</head>

<body>
  <!-- 按钮标签 button -->
  <button>开关灯</button>

  <script>
    // 需求分析：
    //   1. 找到按钮标签
    //   2. 添加点击事件
    //   3. 先实现关灯效果
    //   4. if 分支判断实现开灯和关灯

    // 1. 找到按钮标签，找到的结果可以用变量接收起来
    //   document        网页文档，其实就是当前 html 文件
    //   querySelector   根据选择器查找某个标签
    //     query      查找
    //     Selector   选择器
    var btn = document.querySelector('button')

    // 2. 添加点击事件
    //   addEventListener  事件用于捕获用户的行为，如点击行为
    //     add       添加
    //     Event     事件
    //     Listener  监听器
    //   click           点击行为
    //   function    函数，当事件触发，函数内部的代码就会被执行
    // 准备一个变量用于存储开关的状态
    var isOpen = '开'
    btn.addEventListener('click', function () {
      // 🚨  一个等于号，在 JS 中是赋值保存
      // 🚨  三个等于号，在 JS 中是判断是否等于
      // PS：不建议使用两个等于号，不够严格可能会存在安全问题
      if (isOpen === '开') {
        // 点击后改为关
        isOpen = '关'
        // 同时：网页背景修改成黑色 - 关灯了
        document.body.style.backgroundColor = '#111'
      } else {
        // 点击后改为开
        isOpen = '开'
        // 同时：网页背景修改成白色 - 开灯了
        document.body.style.backgroundColor = '#fff'
      }
    })


  </script>
  <!-- 
    0       完全跟不上

    0.x     中间情况  
    
    1       冇问题，小菜一碟
  -->
</body>

</html>